<template>
    <TabGrayStackedHorizontalBarCard :title="'工单监控'" :isMore="false" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab"
        :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList"
        :echartId="`myEChartsBar-${props.permi}-salesVolume`" :echartData="card.echartData" :colorLegend="colorLegend" 
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
    </TabGrayStackedHorizontalBarCard>
</template>

<script setup>
import TabGrayStackedHorizontalBarCard from '@/DbComponents/tabGrayStackedHorizontalBarCard'
import dashBoardApi from '@/api/Manage/Business/dashBoard'
import { reactive, watch, computed,ref } from 'vue'
import { reportLog } from '@/utils/reportLog'

const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
  projectCode: {
        type: String,
        required: false,
        default: ''
    },
    updateDate: {
        type: String,
        required: false,
        default: ''
    }
})
const card = reactive(
    {
        tabs: [
          { label: '服务类', value: '0'},
          { label: '审核类', value: '1'},
        ],
        curTab: '0',
        tabRight: '',
        unitText: '单位：个',
        updateText: '',
        echartData: {
          lableText:[],
          data:[]
        },
        startDate: '',
        endDate: '',
    }
)
let colorLegend = ref([]) // 颜色
const getChartData = () => {
  let paramData = {
    processType:card.curTab,
    projectKey:props.projectCode,
    pageKey:'page_microb_db_jingying_shangye_pjlist'
  }
    dashBoardApi.getWorkOrderDashboardCollectListApi(paramData).then((res) => {
        if (res.data.code == 0) {
          if(res.data.data.monitorCollectList.length > 0){
            card.echartData.series = []
            card.echartData.sumCollect = []
            if(card.curTab == '0'){ //  服务类
              res.data.data.monitorCollectList.map(item=>{
                let tmp = {
                  name:item.processName,
                  data:[item.noPerfectProcessNum,item.ordinaryProcessNum,item.perfectProcessNum,item.notEvaluatedProcessNum,item.workProcessNum],
                  sum:item.totalProcessNum
                }
                card.echartData.series.push(tmp)
                card.echartData.sumCollect.push(item.totalProcessNum)
              })
              card.echartData.legend = ['不满意','一般','满意','未评价','进行中']
              colorLegend.value = ['#FF470A','#C09F88','#43C902','#CCCCCC','#8EA2EE']
            } else { // 审核类
              res.data.data.monitorCollectList.map(item=>{
                let tmp = {
                  name:item.processName,
                  data:[item.workDelayProcessNum,item.workProcessNum,item.completeProcessNum],
                  sum:item.totalProcessNum
                }
                card.echartData.series.push(tmp)
                card.echartData.sumCollect.push(item.totalProcessNum)
              })
              card.echartData.legend = ['延期进行','正常进行','已完成']
              colorLegend.value = ['#FF470A','#43C902','#CCCCCC']
            }
          } else{
            card.echartData.series = []
            card.echartData.sumCollect = []
          }
        }
    }).catch(err => {
        console.log(err)
    });
}
const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
}
const changeTab = (value) => {
    card.curTab = value
    getChartData()
}

getChartData()

const projectCode = computed(() => {
    return props.projectCode
});
watch(projectCode, () => {
    getChartData()
}, { immediate: true });

</script>

<style scoped lang="scss"></style>
